import { Component, ComponentProps, JSXElementConstructor } from 'react';
import { DiagramEngine, PortModelAlignment, PortWidget } from '@projectstorm/react-diagrams';
import { DatabaseOutlined } from '@ant-design/icons';
import { DatabaseNodeModel } from './DatabaseNodeModel';

import './styles.css';

type GetProps<
    T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
> = ComponentProps<T>;

type DatabaseOutlinedProps = GetProps<typeof DatabaseOutlined>;

export interface DatabaseNodeWidgetProps extends DatabaseOutlinedProps {
	node: DatabaseNodeModel;
	engine: DiagramEngine;
}

export class DatabaseNodeWidget extends Component<DatabaseNodeWidgetProps> {
	render() {
		return (
			<div className="database-node">
				<DatabaseOutlined {...this.props} />
				<PortWidget
					style={{
						top: -16,
						left: 14,
						position: 'absolute'
					}}
					// @ts-ignore
					port={this.props.node.getPort(PortModelAlignment.TOP)}
					engine={this.props.engine}
				>
					<div className="database-port"></div>
				</PortWidget>
			</div>
		);
	}
}